<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
</head>
<body>
  <div id="calculate">
    <input type="text" v-model.number="numOne">
    <input type="text" v-model.number="numTwo">
    <button @click="calculateAll">计算</button>
    <p>计算结果为：</p> 
    <p>相加:{{ sum }}</p>
    <p>相减:{{ reduce }}</p>
    <p>相乘:{{ multiply }}</p>
    <p>相除:{{ except }}</p>
  </div>
  <script>

    new Vue({
      el:'#calculate',
      data() {
       
        return {
          sum:'',
          reduce:'',
          multiply:'',
          except:'',
          numOne:'',
          numTwo:'',
        }
      },
      methods: {
        calculateAll(){
          // console.log(this.numOne);
          // console.log(this.numTwo);
          console.log(this.numTwo + this.numOne);
         //必须要写this不然找不到指向
          this.sum = this.numOne + this.numTwo;
          this.reduce = this.numOne - this.numTwo;
          this.multiply = this.numOne * this.numTwo;
          this.except = this.numOne / this.numTwo;
          console.log(sum);
        }
      },
    })
  </script>


</body>
</html>